<template>
	<view style="background-color:aliceblue; border-radius: 15px; padding: 10px; ">
		<view class="title-img-row" v-if="isOneImg && isOneImg.length > 0">
			<!-- 图 -->
			<view class="single-img-container">
				<image 
					:src="isOneImg[0]" 
					mode="aspectFill"
					@error="handleImageError()" 
					style="width: 100px; height: 80px; border-radius: 8px;"
				></image>
			</view>

			<!-- 标题 -->
			<view class="title-container">
				<text style="line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{ title }}</text>
			</view>
		</view>

		<!-- 原标题区域  -->
		<view v-else class="title-only" 
		style="padding-left: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">
			<text>{{ title }}</text>
		</view>

		<!-- 多图区域  -->
		<view class="img-container" v-if="images && images.length > 0">
			<image 
				v-for="(img, index) in images.slice(0,3)" 
				:key="index" 
				:src="img" 
				mode="aspectFill"
				style="width: calc((100% - 10px)/3); height: 80px; border-radius: 8px;"
			></image>
		</view>

		<!-- 底部  -->
		<view class="content-container">
			<text :hidden="!isTop" style="color: red;">置顶</text>
			<text :hidden="!isguang" style="color: blue;">广告</text>
			<text>{{author}}</text>
			<text>{{comments}}评</text>
			<view class="timeFlexEnd">
				<text>{{time}}</text>
			</view>
		</view>
		<!--  插槽 -->
		<slot name="tips"></slot>
	</view>
</template>

<script>
	export default {
		name: "newsView",
		
		data(){
			return{
				errImage:'/static/unpicture.png'
			}
		},
		props: {
			title: {
				type: String,
				default: '新闻标题',
				required: true, 
			},
			author: {
				type: String,
				default: '作者',
				required: true,
			},
			comments: {
				type: String,
				default: '0',
				required: true,
			},
			time: {
				type: String,
				default: '2025-10-28',
				required: true,
			},
			isTop: {
				type: Boolean,
				default: true,
				required: true
			},
			images: {
				type: Array,
				default: () => [] 
			},
			
			isOneImg: {
				type: Array,
				default: () => [] 
			},
			isguang: {
				type: Boolean,
				default: false,
				required: true
			},
		},
		methods: {
			gotoDetailPage() {
				
			},
			
			handleImageError(){
				this.isOneImg[0] = this.errImage; 
			}
		}
	}
</script>

<style>
	.timeFlexEnd {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		margin-right: 10px;
	}

	.content-container {
		display: flex;
		justify-content: space-between;
		padding-left: 5px;
		margin-top: 8px;
	}

	.content-container text {
		margin-right: 10px;
		font-size: 12px;
		color: gray;
	}

	.img-container {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 0;
		gap: 5px;
	}

	.title-img-row {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 8px;
	}
	.title-container {
		flex: 1;
		font-size: 16px;
	}
	.single-img-container {
		width: 100px;
	}
</style>